<template>
  <a-range-picker
    class="w-full"
    :value="momVal"
    v-bind="$attrs"
    :getCalendarContainer="getCalendarContainer"
    @change="handleDateChange"
  />
</template>
<script>
import moment from 'moment'
export default {
  name: 'ZRangeDate',
  props: {
    value: {
      type: Array
    },
    valueFormat: {
      type: String,
      default: 'YYYY-MM-DD'
    },
    getCalendarContainer: {
      type: Function,
      default: (node) => node.parentNode
    },
    timeEndFormat: { // 自动拼接范围查询结尾为00:00:00 - 23:59:59
      type: Boolean,
      default: () => true
    }
  },
  data() {
    return {
      momVal: []
    }
  },
  watch: {
    value(val) {
      if (!val) {
        this.momVal = null
      } else {
        this.momVal = val
      }
    }
  },
  methods: {
    moment,
    handleDateChange(mom, dateStr) {
      // 范围选择框兼容valueFormat属性
      const date = []
      if (mom[0]) {
        let mom_ = mom[0]
        if (this.timeEndFormat) mom_ = mom[0].format('YYYY-MM-DD') + ' 00:00:00'
        date[0] = (moment(mom_).format(this.valueFormat))
      }
      if (mom[1]) {
        let mom_ = mom[1]
        if (this.timeEndFormat) mom_ = mom[1].format('YYYY-MM-DD') + ' 23:59:59'
        date[1] = (moment(mom_).format(this.valueFormat))
      }
      // if (mom.length > 0) {
      //   date = [mom[0].format(this.valueFormat), mom[1].format(this.valueFormat)]
      // }
      this.$emit('change', date)
    }
  },
  model: {
    prop: 'value',
    event: 'change'
  }
}
</script>
